<template>
  <div class="property-panel" ref="processPropertyPanel">
    <el-form :inline="false" :model="form" label-width="100px" size="small" label-position="left">
      <el-form-item label="流程名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="流程Key">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="流程描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

</style>
<script>
export default {
  name: "ProcessPropertyPanel",
  props: {
    modeler: {
      type: Object,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      form: {
        id: "",
        name: "",
        description: "",
      },
    };
  },
  methods: {
    updateProcess(propObj = this.form) {
      let _obj = { ...propObj };
      delete _obj.$type;
      delete _obj.flowElements;
      const modeling = this.modeler.get("modeling");
      modeling.updateProperties(this.element, _obj);
    },
    formChange() {
      if (this.formChangeByMounted) return;
      this.updateProcess();
    },
  },
  mounted() {
    this.formChangeByMounted = true;
    this.form = {
      ...this.element.businessObject,
      ...this.element.businessObject.$attrs,
    };
    this.$nextTick(() => {
      this.formChangeByMounted = false;
    });
    this.$watch("form", this.formChange, { deep: true });
  },
};
</script>
<style lang="scss" scoped>
.property-panel {
  padding: 10px;
  width: 100%;
}
